<template>
  <view class="ver-layout">
    <!--兑换列表-->
    <block v-if="chargeList.length>0">
      <view v-for="(item,index) in chargeList" :key="index" class="charge-view" @click="navToPage(item)">
        <view class="charge-top hor-layout-side-center">
          <view>{{ item.org_name }}</view>
          <view>{{ getItemState(item) }}</view>
        </view>
        <view class="charge-bottom hor-layout">
          <image class="charge-icon" :src="item.goods_image"/>
          <view class="charge-bottom-info ver-layout">
            <view class="text">兑换时间：{{ item.created_at }}</view>
            <view class="text">使用积分：{{ item.goodspoints }}</view>
          </view>
        </view>
        <view class="charge-complete-view" v-if="item.status===2">
          <view class="charge-complete">已完成</view>
        </view>
      </view>
      <u-loadmore v-if="loadingObj.status" margin-top="15" :status="loadingObj.status"/>
    </block>
    <view v-else class="list-no-data">暂无数据</view>
  </view>
</template>

<script>
import {recordStudentCscoreOrder} from "@/router.js"
import {CscoreDetailApi} from "@/api/recordStudy.js"

let engine = new CscoreDetailApi()
export default {
  name: "cscoreCharge",
  data() {
    return {
      studentObj: {},
      chargeList: [],
      loadingObj: {
        status: '',
        current: 1,
        total: ''
      },
    }
  },
  onLoad(options) {
    this.studentObj = options
    this.refreshData()
  },
  onReachBottom(e) {
    this.loadMore()
  },
  methods: {
    navToPage(item) {
      // this.$u.route({url: recordStudentCscoreOrder, params: item})
    },
    getItemState(item) {//商品兑换状态【0未兑换1待确认2已兑换】
      let stateMap = {0: '未兑换', 1: '待确认', 2: '已兑换'}
      return stateMap[item.status]
    },
    getCscoreChargeList() {
      let sid = this.studentObj.student_id, page = this.loadingObj.current
      engine.getCscoreChargeList({sid, page}).then(res => {
        this.chargeList = this.chargeList.concat(res.data)
        this.loadFinish(res.total)
      })
    },
    refreshData() {
      this.loadingObj.current = 1
      this.loadingObj.status = ''
      this.chargeList = []
      this.getCscoreChargeList()
    },
    loadMore() {
      if (this.loadingObj.current >= this.loadingObj.total) {
        this.loadingObj.status = 'nomore'
      } else {
        this.loadingObj.status = 'loading'
        this.loadingObj.current = this.loadingObj.current + 1
        this.getCscoreChargeList()
      }
    },
    loadFinish(total) {
      this.loadingObj.total = Math.ceil(total / 10)
      this.loadingObj.status = ''
      if (this.loadingObj.current >= this.loadingObj.total
          && this.chargeList.length > 0) {
        this.loadingObj.status = 'nomore'
      }
    },
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.charge-view {
  padding: 0px 12px;
  margin: auto;
  margin-top: 18px;
  width: calc(100% - 24px);
  background: #FFFFFF;
  border-radius: 6px;
}

.charge-top {
  height: 50px;
  border-bottom: 1px solid #E5E5E5;
}

.charge-icon {
  width: 51px;
  height: 51px;
  border-radius: 3px;
}

.charge-bottom {
  margin-top: 12px;
  margin-bottom: 18px;
}

.charge-bottom-info {
  margin-top: 6px;
  margin-left: 8px;
}

.charge-bottom-info > .text {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}

.charge-complete-view {
  margin-top: 15px;
  margin-bottom: 18px;
  display: flex;
  justify-content: right;
}

.charge-complete {
  width: 76px;
  height: 30px;
  border: 1px solid #FF873E;
  border-radius: 15px;
  text-align: center;
  /* 文本样式 */
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FF873E;
  line-height: 25px;
}
</style>
